<template>
    <div class="main">
        <div class="top_box">
            <el-select style="width:300px;margin-left:20px" v-model="subjectId" placeholder="请选择题目">
                <el-option v-for="item in subjectList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
            <el-input placeholder="请输入选项名称" style="width: 200px;margin-left:10px" v-model="option_name"></el-input>
            <el-button type="warning" style="margin-left:10px" icon="el-icon-search" size="small" @click="getInfo">搜索</el-button>
            <el-button style="margin-left:20px" size="small" @click="close" type="primary">重置</el-button>
            <el-button type="success" style="margin-left:20px" icon="el-icon-upload" size="small " @click="leadingOut">导出</el-button>

        </div>
        <!-- 表格 -->
        <el-table :data="data" style="width: 100%" border height="100%">
            <el-table-column prop="nickname" label="用户信息" align="center">
            </el-table-column>
            <el-table-column prop="cate_name" label="类型" align="center">
            </el-table-column>
            <el-table-column prop="name" label="题目" align="center">
            </el-table-column>
            <el-table-column prop="option_name" label="题目" align="center">
            </el-table-column>
            <el-table-column prop="desc" label="其他描述" align="center">
            </el-table-column>
        </el-table>
        <el-pagination class=" main-pagination" :total="total" :current-page.sync="page" :page-size="limit" layout="prev, pager, next, jumper,total" @current-change="getInfo" hide-on-single-page></el-pagination>
    </div>
</template>

<script>
import { post } from "@/assets/js/http.js"
import queryString from "qs"
export default {
    data() {
        return {
            total: 0,
            limit: 20,
            page: 1,
            subjectId: "",
            subjectList: [],
            data: [],
            option_name: ""
        }
    },
    methods: {
        getInfo(index = 1) {
            post({
                url: "/admin/answer.Subject/option_desc",
                data: {
                    subject_id: this.subjectId,
                    limit: this.limit,
                    page: index,
                    option_name: this.option_name
                },
                loading: true
            }).then(res => {
                this.total = res.total
                this.data = res.data
            })
        },
        getSubject() {
            post({
                url: "/admin/answer.Subject/qt_subject_list"
            }).then(res => {
                console.log(res);
                this.subjectList = res
            })
        },
        close() {
            this.subjectId = ""
            this.option_name = ""
            this.getInfo()
        },
        // 导出
        leadingOut() {
            open("http://nhcj.app65.cn/api/Realmerit/option_desc_export?" + queryString.stringify({
                id: localStorage.getItem('id'),
                role: localStorage.getItem('role'),
                subject_id: this.subjectId,
                option_name: this.option_name
            }))
        }
    },
    mounted() {
        this.getInfo()
        this.getSubject()
    }
}
</script>

<style>
</style>